<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="主贴ID">
        <el-input clearable size="small" v-model="formInline.tid" placeholder="请输入主贴ID"></el-input>
      </el-form-item>
      <el-form-item label="发帖用户ID">
        <el-input clearable size="small" v-model="formInline.uid" placeholder="请输入用户ID"></el-input>
      </el-form-item>
      <el-form-item label="发帖用户昵称">
        <el-input clearable size="small" v-model="formInline.nickName" placeholder="请输入用户昵称"></el-input>
      </el-form-item>
      <el-form-item label="回帖ID">
        <el-input clearable size="small" v-model="formInline.replyCid" placeholder="请输入主贴ID"></el-input>
      </el-form-item>
      <el-form-item label="回帖用户ID">
        <el-input clearable size="small" v-model="formInline.replyUid" placeholder="请输入用户ID"></el-input>
      </el-form-item>
      <el-form-item label="回帖用户昵称">
        <el-input clearable size="small" v-model="formInline.replyNickName" placeholder="请输入用户昵称"></el-input>
      </el-form-item>
      <el-form-item label="话题">
        <el-select clearable size="small" v-model="formInline.tagName" placeholder="请选择话题">
          <el-option
            v-for="(item,index) in threadTagList"
            :key="index"
            :label="item.label"
            :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="reset" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      empty-text="暂无数据"
    >
      <el-table-column label="评论ID" width="80">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="发帖用户昵称" width="150">
        <template slot-scope="scope">
          <el-tag @click="goUser(scope.row)" size="small" style="cursor:pointer;">{{ scope.row.userInfo.nickname }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="150">
        <template slot-scope="scope">{{ scope.row.userInfo.mobile }}</template>
      </el-table-column>
      <el-table-column label="主贴ID" width="110">
        <template slot-scope="scope">
          <el-tag style="cursor:pointer;" @click="goTie(scope.row)" size="small">{{ scope.row.tid }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="话题名称" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.tags }}</span>
        </template>
      </el-table-column>
      <el-table-column label="回帖ID" width="100">
        <template slot-scope="scope">
          {{ scope.row.replyCid }}
        </template>
      </el-table-column>
      <el-table-column label="回帖用户ID" width="120">
        <template slot-scope="scope">{{ scope.row.replyUserInfo.id }}</template>
      </el-table-column>
      <el-table-column label="回帖用户昵称" width="120">
        <template slot-scope="scope">{{ scope.row.replyUserInfo.nickname }}</template>
      </el-table-column>
      <el-table-column label="评论时间" width="180">
        <template slot-scope="scope">{{ scope.row.createTime }}</template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="内容" width="200">
        <template slot-scope="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-popconfirm
            @onConfirm="del(scope.row)"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="是否删除本条数据？">
              <el-button  slot="reference" type="text" style="color:#ff0000;">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:10px 0 0 0;text-align:right;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageObj.pageNum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="pageObj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageObj.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getCommentListApi,
  getThreadTagApi,
  deleteCommentApi
} from "@/api/forum";

export default {
  data() {
    return {
      list: [],
      listLoading: true,
      currentPage: 1,
      formInline: {
        tid: "",
        replyCid: "",
        uid: "",
        nickName: "",
        replyUid: "",
        tagName: '',
        replyNickName: '',
      },
      pageObj: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      threadTagList: [],
    };
  },
  created() {
    if(this.$route.query.tid) {
      this.formInline.tid = this.$route.query.tid
    }
    this.fetchData();
    this.getThreadTag()
  },
  methods: {
    reset() {
      this.formInline.tid = ''
      this.formInline.replyCid = ''
      this.formInline.uid = ''
      this.formInline.nickName = ''
      this.formInline.replyUid = ''
      this.formInline.tagName = ''
      this.formInline.replyNickName = ''
      this.pageObj.pageNum = 1
      this.pageObj.pageSize = 10
      this.fetchData()
    },
    goUser(row) {
      this.$router.push({
        path: '/users/list',
        query: {
          nickName: row.userInfo.nickname
        }
      })
    },
    del(row) {
      deleteCommentApi({
        ids: row.id
      }).then((res) => {
        this.fetchData()
      })
    },
    goTie(row) {
      this.$router.push({
        path: '/forum/list',
        query: {
          tid: row.tid
        }
      })
    },
    getThreadTag() {
      getThreadTagApi({
        pageSize: 100,
        pageNum: 1,
        state: 1,
        type: 'video',
      }).then((response) => {
        this.threadTagList = response.data.result.map((item, index) => {
          return {
            value: item.id,
            label: item.name
          }
        })
      })
    },
    onSubmit() {
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true;
      getCommentListApi({
        tid: this.formInline.tid,
        replyCid: this.formInline.replyCid,
        uid: this.formInline.uid,
        nickName: this.formInline.nickName,
        replyUid: this.formInline.replyUid,
        pageSize: this.pageObj.pageSize,
        pageNum: this.pageObj.pageNum,
        tagName: this.formInline.tagName,
        replyNickName: this.formInline.replyNickName,
        type: 'video',
      }).then(response => {
        this.list = response.data.result
        this.listLoading = false;
        this.pageObj.total = response.data.total
      });
    },
    handleSizeChange(val) {
      this.pageObj.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageObj.pageNum = val
      this.fetchData()
    }
  }
};
</script>
